<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>forget</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/proList.css"/>
    <link rel="stylesheet" type="text/css" href="css/forget.css"/>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        /**
         * 表单校验:1.邮箱：邮箱格式
         *         4.验证码：非空
         */
        //校验邮箱
        function checkUsername() {
            //1. 获取邮箱的值
            var username = $("#username").val();
            //2. 定义正则表达式
            var reg_username = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            //3. 判断，给出提示信息
            var flag = reg_username.test(username);
            if (flag) {
                //邮箱合法
                $("#username").css("border", "1px solid green");
            } else {
                //邮箱非法
                $("#username").css("border", "1px solid red");
            }
            return flag;
        }

        //校验验证码
        function checkCode() {
            //1. 获取验证码的值
            var check = $("#check").val();
            //2. 判断验证码是否为空
            var flag = !(check.length == 0);
            if (flag) {
                //验证码不为空
                $("#check").css("border", "1px solid green");
            } else {
                //验证码为空
                $("#check").css("border", "1px solid red");
            }
            return flag;
        }

        $(function () {
            //表单提交时，调用所有的校验方法
            $("#btn_submit").submit(function () {
                //1. 发送数据到服务器
                if (checkUsername() && checkCode()) {
                    $.post("user/forget", $("#forgetForm").serialize(), function (data) {
                        
                    })
                }
            });
            $("#username").blur(checkUsername);
            $("#check").blur(checkCode);
        })
    </script>

    <style>
        #btn_submit:hover {
            background-color: #c10000;
        }
    </style>
</head>
<body><!----------------------------------------order------------------>
<div class="order cart"><!-----------------logo------------------->
    <div class="logo"><h1 class="wrapper clearfix"><a href="index.html"><img class="fl" src="img/temp/logo.png"></a>
    </h1></div>
    <div class="forCon"><p>安全设置-找回密码</p>
        <ul>
            <li class="on"><span>01/</span>输入登录名</li>
            <li><span>02/</span>验证信息</li>
            <li><span>03/</span>重置密码</li>
        </ul>
        <div class="formCon"><!--步骤1-->
            <form id="forgetForm" action="" class="one">
                <input type="text" name="username" id="username" placeholder="邮箱"><label>请输入登录邮箱</label><br/>
                <input type="text" name="check" id="check" placeholder="验证码"><label>请输入验证码</label><br/>
                <img src="checkCode" onclick="changeCheckCode(this)">
                <script type="text/javascript">
                    //图片点击事件
                    function changeCheckCode(img) {
                        img.src = "checkCode?" + new Date().getTime();
                    }
                </script>
                <br><input id="btn_submit" type="submit" value="下一步" class="next" style="width: 120px; height: 38px">
            </form>
            <!--步骤2-->
            <form action="#" method="post" class="two"><p>电子邮箱：<span>114081*****qq.com</span></p>
                <p class="tip">验证邮件已发往你的电子邮箱，请点击邮件中的链接完成验证</p><input type="button" value="去邮箱验证" class="next1">
            </form>
            <!--步骤3-->
            <form action="#" method="post" class="three"><label>新密码：</label><input type="text" value=""><br/><label>确认密码：</label><input
                    type="text" value=""><br/><input type="button" value="完成">
            </form>
        </div>
    </div>
</div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>